import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { message } from 'antd';
import 'antd/lib/message/style';
import LoginFooter from '../Login_Footer';
import {
  COMMON_SUCCESS_STATE,
  LOGIN_PATH, PAN_PATH_HOME
} from '../../../constant';
import { verifyCode, verifyPhone } from '../../../utils/verify';
import { loginSendCode, smsLogin } from '../../../api';
import './index.less';

class Modal_Login extends PureComponent {

  static propTypes = {
    history: PropTypes.object
  };

  state = {
    smsLoginObject: {
      phone: '',
      code: '',
    },
    isClickCode: false,
    loginTip: '',
  };

  // input 受控组件
  inputSMSLoginObject = (type, event) => {
    const { smsLoginObject } = this.state;
    smsLoginObject[type] = event.target.value;
    this.setState({
      loginObject: JSON.parse(JSON.stringify(smsLoginObject)),
    });
  };

  // 发送验证码
  sendCode = async (event) => {
    const {
      smsLoginObject: { phone },
      isClickCode
    } = this.state;
    if (verifyPhone(phone)) {
      if (!isClickCode) {
        this.setState({
          isClickCode: true,
        });
        const { target } = event;
        let time = 60;
        let text = `${time}s后获取`;
        target.innerText = text;
        this.timerId = setInterval(() => {
          if (time <= 0) {
            clearInterval(this.timerId);
            text = '获取验证码';
            target.innerText = text;
            this.setState({
              isClickCode: false,
            });
            return;
          }
          time -= 1;
          text = `${time}s后获取`;
          target.innerText = text;
        }, 1000);

        // 发送请求获取验证码
        const {
          code,
          msg
        } = await loginSendCode(phone);
        if (code === COMMON_SUCCESS_STATE) {
          // 请求成功
          message.success(msg);
        } else {
          message.error(msg);
        }
      }
    } else {
      message.warn('请输入正确的手机号');
    }
  };

  // 登录
  smsLogin = async () => {
    const { smsLoginObject } = this.state;
    let tip = '';
    if (!verifyPhone(smsLoginObject.phone)) {
      tip = '请输入格式正确的手机号码';
    } else if (!verifyCode(smsLoginObject.code)) {
      tip = '请输入6位验证码';
    }
    if (tip) {
      this.setState({
        loginTip: tip,
      });
      return;
    }
    // 登录
    const {
      code,
      msg
    } = await smsLogin(smsLoginObject);
    if (code === COMMON_SUCCESS_STATE) {
      message.success('登录成功');
      // 跳转网盘页面
      this.props.history.replace(PAN_PATH_HOME);
    } else {
      message.error(msg);
    }
  };

  render () {
    const { loginTip } = this.state;

    return (
      <>
        <div className="sms_login">
          <div className="sms_login_title">
            <span>
                短信快捷登录
            </span>
            <span>
              <a href="/#" onClick={(event) => {
                event.preventDefault()
                this.props.history.push(LOGIN_PATH);
              }}>
                  账号密码登录&gt;
              </a>
            </span>
          </div>
          <div className="sms_login_tro">
            验证即登录，未注册将自动创建百度帐号
          </div>
          <p className="sms_login_tip">
            {
              loginTip
            }
          </p>
          <div className="sms_login_input">
            <input
              type="text"
              onInput={(event) => this.inputSMSLoginObject('phone', event)}
              name="username"
              placeholder="手机号"
            />
            <div>
              <input
                type="text"
                onInput={(event) => this.inputSMSLoginObject('code', event)}
                placeholder="验证码"
              />
              <button onClick={this.sendCode}>发送验证码</button>
            </div>
          </div>
          <div className="sms_login_button">
            <input type="submit" value="登录" onClick={this.smsLogin}/>
          </div>
          <div className="sms_login_tool">
            阅读并接受
            <a href="/#">
              《百度用户协议》
            </a>
          </div>
          <LoginFooter/>
        </div>
      </>
    );
  }
}

export default Modal_Login;
